<template>
	<div class="sign">
		<canvas @touchstart="start" @touchmove="move" width="300" height="300" ref="canvas" class="canvas"></canvas>
		<input type="button" @click="url=canvas.toDataURL()" value="生产图片">
		<img :src="url">
	</div>
</template>
<script>
export default {
	data() {
		return {
			url: '',
			canvas: null,
			ctx: null,
			stageInfo: null
		}
	},
	mounted() {
		this.canvas = this.$refs.canvas
		this.ctx = this.canvas.getContext('2d')
		this.stageInfo = this.canvas.getBoundingClientRect()
		console.log(this.stageInfo)
		this.ctx.lineWidth = 8
		this.ctx.lineCap = 'round'
		this.ctx.lineJoin = 'round'

	},
	methods: {
		start(e) {
			this.ctx.moveTo(
				e.changedTouches[0].clientX - this.stageInfo.left,
				e.changedTouches[0].clientY - this.stageInfo.top
			)
		},
		move(e) {
			this.ctx.lineTo(
				e.changedTouches[0].clientX - this.stageInfo.left,
				e.changedTouches[0].clientY - this.stageInfo.top
			)
			this.ctx.stroke()
			console.log(e.changedTouches[0].clientX, e.changedTouches[0].clientY)
		},
		clear() {
			this.ctx.clearRect(0, 0, 300, 300)
		}
	}
}
</script>
<style>
.sign {
	/* position: fixed;
	top: 0; */
	
	height: 100%;
	width: 100%;
}
.canvas {
	background-color: red;
	margin: 30px;
}
</style>

